
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        canvas.width=800;
        canvas.height=800;
        var context=canvas.getContext("2d");
        fillRoundRect(context,150,150,500,500,10,"#bbada0");
        for(var i=0;i<4;i++){
            for(var j=0;j<4;j++){
                fillRoundRect(context,170+i*120,170+j*120,100,100,6,"#ccc03b");
            }
        }
    }
        function fillRoundRect(cxt,x,y,width,height,radius,fillcolor){
            if(2*radius>width||2*radius>height)
            return;
            cxt.save();
            cxt.translate(x,y);
            pathRoundRect(cxt,width,height,radius);
            cxt.fillStyle=fillcolor||"black";
            cxt.fill();
            cxt.restore();
        }
        function strokeRoundRect(cxt,x,y,width,height,lineWidth,radius,strokecolor){
            if(2*radius>width||2*radius>height)
            return;
            cxt.save();
            cxt.translate(x,y);
            pathRoundRect(cxt,width,height,radius);
            cxt.lineWidth=lineWidth||1;
            cxt.strokeStyle=strokecolor||"black";
            cxt.stroke();
            cxt.restore();
        }
        function pathRoundRect(cxt,width,height,radius){
            cxt.beginPath();
            cxt.arc(width-radius,height-radius,radius,0,Math.PI/2);
               cxt.lineTo(radius,height);

           cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
              cxt.lineTo(0,radius);
            cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
            cxt.lineTo(width-radius,0);

            cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);



            cxt.closePath();















        }

</script>
</body>
</html>